<template>
	<view class="article" v-if="articleData!=null">
		<view class="articleTitle">
			{{articleData.title}}
		</view>
		<view class="articleInfo">
			<view class="articleInfoImg">
				<view>
					<image  v-if="articleData.imgPics!=null"class="infoImg" :src="articleData.imgPics[0]" mode="center"></image>
					<image  v-else="articleData.imgPics!=null"class="infoImg" src="/static/images/tx.png" mode="center"></image>
				</view>
				<view class="">
					{{articleData.authorName}}
					<view class="">
						{{dayjs(parseInt(articleData.publishTime)).format('YYYY-MM-DD hh:mm:ss')  }}
					</view>
				</view>
			</view>
			<view class="articleInfoBtn" @click="appurl(null)">
				关注
				<launchApp v-if="isWeChatShow"></launchApp>
			</view>

		</view>


		<!-- 		听全文·约5分钟 语音播放 -->

		<view :class=" articleTextShow?'articleText articleTextShow':' articleText '">
			<view class="">
				<view class="desc">
					<parser :html="articleData.content"></parser>
				</view>
			</view>
			<view class="articleMoel" @tap="articleMoelTap()" v-if="articleTextShow!=true">
				<image src="/static/images/xl.png" mode=""></image>
				<view class="articleTextAdd">
					点击查看完整内容

				</view>
			</view>

		</view>

		<view class="articleComment">

			<view class="commentnum">
				评论672
			</view>
			<view class="comment" v-for="(item , index) in commentData" :key="index">
				<view class="">
					<image class="infoImg" :src="item.author.avartarUrl" mode="center"></image>
				</view>
				<view class="commentR">
					<view class="">
						{{item.author.nikename}}
					</view>
					<view class="">
						{{item.content}}
					</view>
					<view class="commentReply">
						<view class="reply">
							0回复
							<image class="replyImg" src="/static/images/zk.png" mode=""></image>
						</view>
						<view class="commentReplyR">
							<view class="">
								<!-- 	v-if="isLiked" -->
								<image class="commentIimg" src="/static/images/xh.png" mode="center"></image>
								{{item.likeCount}}
							</view>
							<view class="">
								<image class="commentIimg" src="/static/images/xss.png" mode="center"></image>
							</view>

						</view>
					</view>
					<view class="isAuthorLiked" v-if="item.isAuthorLiked==true">
						作者赞过
					</view>

				</view>

			</view>

		</view>
		<view class="appPush">
			<view class="appPushBtn" @click="appurl(null)">
				APP内打开
				<image class="replyImg" src="/static/images/bj.png" mode=""></image>
				<launchApp v-if="isWeChatShow"></launchApp>
			</view>
			<view class="commentAdd" @click="appurl(null)">
				查看更多评论
				<image class="replyImg" src="/static/images/x-zk.png" mode=""></image>
			</view>
		</view>
		<!-- 	<view class="foot">
			<view class="footView">
				<image src="/static/images/f1.png" mode="center"></image>454
			</view>
			<view class="footView">
				<image src="/static/images/f2.png" mode="center"></image>454
			</view>
			<view class="footView">
				<image src="/static/images/f3.png" mode="center"></image>454
			</view>
			<view class="footView">
				<image src="/static/images/f4.png" mode="center"></image>454
			</view>
		</view> -->
		<view class="shareWX" @tap="shareWXH()" v-if="shareWX">
			<image src="/static/images/llq.png" mode=""></image>
			<view class="shareWXtext">
				请点击右上角
			</view>
			<view class="shareWXtext">
			使用默认浏览器打开下载
			</view>
		</view>
	</view>
</template>

<script>
	import launchApp from '../components/launchApp .vue';
	const isWeChat = () => {
		const ua = navigator.userAgent.toLowerCase();
		return ua.includes('micromessenger');
	};
	export default {
		props: {
			articleData: {
				type: Object,
				default: null
			},
			commentData: {
				type: Array,
				default: null
			},
			bizId: {
				type: String,
				default: null
			},
			dataType: {
				type: String,
				default: null
			}
		},
		components: {
			launchApp
		},
		data() {
			return {
				shareWX:false,
				articleTextShow: false,
				isWeChatShow:false
			};
		},
		created() {
			this.isWeChatShow=isWeChat()
		 },
		onShow(e) {


		},
		onLoad(e) {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		/*小程序分享*/
		onShareAppMessage() {

		},
		methods: {
			shareWXH() {
				this.shareWX = false
			},
			articleMoelTap() {
				this.articleTextShow = !this.articleTextShow
				// this.appurl()
			},
			appurl(item) {
				if (isWeChat()) {
					this.shareWX = true
				} else {
					const deviceInfo = uni.getSystemInfoSync();
					let queryString
					if (item !== null) {
						this.dataType = item.dataType
						this.bizId = item.id
						queryString = item.shareUrl.split('?')[1]; // 获取"?"后的部分
					} else {
						let shareUrl = this.dramaDetail.shareUrl
						queryString = shareUrl.split('?')[1]; // 获取"?"后的部分
						console.log(queryString); // 输出: name=value
						// setTimeout(function() {
						//       // 如果在1秒后仍然没有打开App，则跳转到下载页面或提示用户安装App
						// window.location.href = `https://www.zzdnews.com/app/testFexiang.html?` + `dataType=` + this.dataType +
						//   }, 1000);
					}
					if (deviceInfo.osName == 'ios') {
						var url = 'zzdnews://path?' + `dataType=` + this.dataType + `bizId=` + this
							.bizId // 这里的'myapp'是你的App的URL scheme
						window.location = url
					} else {
						window.location.href = `https://www.zzdnews.com/app/testFexiang.html?` + `dataType=` + this
							.dataType + `bizId=` + this.bizId

					}
				}

			},
			/*加载数据*/
			loadData() {
				this.getData();
			},

			/*获取文章详情*/
			getData() {

			},

			/*点赞*/
			like() {

			},

			/*评论点赞*/
			commentLike(comment_id, index) {

			},

			/*收藏*/
			favorite() {

			},

			/*初始化添加评论*/
			initAddComment(status) {

			},

			/*添加评论或回复*/
			addCommentOrReply() {

			},

			/*添加评论*/
			addComment() {

			},

		}
	};
</script>

<style scoped lang="scss">
	.shareWX {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 99;
		top: 0;
		left: 0;
		text-align: right;
		color: #fff;
		font-size: 33rpx;
		.shareWXtext{
			padding-right: 60rpx;
		}
		image {
			width: 200rpx;
			height: 90px;
			margin-right: 20rpx;
		}
	}
	.article {
		padding-bottom: 40rpx;

		.infoImg {
			width: 100rpx;
			height: 100rpx;
			margin-right: 10rpx;
			border-radius: 50%;
			box-sizing: border-box;
		}

		.commentIimg {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		padding: 30rpx;

		.articleTitle {
			width: 686rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: rgba(0, 0, 0, 0.9);
			line-height: 56rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 40rpx;
		}

		.articleInfo {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.articleInfoImg {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.articleInfoBtn {
			width: 104rpx;
			height: 60rpx;
			background: #FD3933;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}

		.articleText {
			position: relative;
			height: 800rpx;
			overflow: hidden;

			.articleMoel {
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 3;
				width: 100%;
				height: 80%;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 100%);
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				.articleTextAdd {
					width: 686rpx;
					height: 86rpx;
					background: #FD3933;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					position: absolute;
					bottom: 0;
					left: 0;

				}

				image {
					width: 20px;
					height: 20px;
					position: absolute;
					bottom: 17%;
					left: 45%;
					z-index: 8;
				}
			}
		}

		.articleTextShow {
			height: auto;
		}
	}

	.articleComment {
		margin-top: 40rpx;
		padding-bottom: 200rpx;

		.commentnum {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
			line-height: 42rpx;
			margin-bottom: 40rpx;
		}
	}

	.comment {
		display: flex;
		width: 100%;
		margin-bottom: 20rpx;

		.commentR {
			flex: 1;
		}

		.commentReply {
			display: flex;
			justify-content: space-between;
			flex: 1;

			.commentReplyR {
				display: flex;
				align-items: center;
				justify-content: center;

				view {
					display: flex;
					align-items: center;
					margin-left: 40rpx;
				}
			}
		}
	}

	.foot {
		width: 100%;
		height: 100rpx;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-around;
		left: 0%;
		bottom: 0;
		background-color: #fff;

		.footView {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}
	}

	.appPush {
		position: fixed;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 100%);
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		left: 0;
		bottom: 0;
		padding: 60rpx 0;
		z-index: 99;

		.appPushBtn {
			width: 288rpx;
			height: 84rpx;
			background: #FD3933;
			border-radius: 104rpx 104rpx 104rpx 104rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			position: relative;
			image {
				width: 30rpx;
				height: 30rpx;
				position: relative;
				top: 2rpx;
			}
		}

		.commentAdd {
			font-weight: 400;
			font-size: 24rpx;
		}
	}

	.isAuthorLiked {
		background-color: #F5F5F5;
		width: 120rpx;
		font-size: 20rpx;
		color: #999;
		text-align: center;
	}

	.reply {
		width: 140rpx;
		background: #F5F5F5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;

	}

	.replyImg {
		width: 20rpx;
		height: 20rpx;
		margin-left: 5rpx;
	}
</style>